<template>
  <el-card>
    <el-button type="primary" icon="el-icon-circle-plus-outline"
      >新增</el-button
    >
    <el-divider />
    <el-table :data="list" style="width: 100%"  >
      <el-table-column prop="id" label="ID" min-width="180"></el-table-column>
      <el-table-column
        prop="specsname"
        label="规格名称"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="attrs"
        label="规格可选值"
        min-width="180"
      ></el-table-column>
      <el-table-column prop="status" label="状态" min-width="180">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === 1">正常</el-tag>
          <el-tag v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template>
          <el-button
            type="primary"
            circle
            icon="el-icon-edit"
            size="mini"
          ></el-button>
          <el-button
            type="danger"
            circle
            icon="el-icon-delete"
            size="mini"
          ></el-button>
        </template>
      </el-table-column >
      <el-pagination :page-size="size" background layout="prev, pager, next" :total="total">
      </el-pagination>
    </el-table>
  </el-card>
</template>

<script>
import { getSpecsList, getSpecsCount } from "../../request/specs";
export default {
  data() {
    return {
        list: [],
        page: 1,
        size: 1,
        total: 0,
      }
  
  },
  methods: {
    async dataInit() {
      // const list = await getSpecsList(this.page, this.size);
      // if (list) {
      //   // 更新数据
      //   this.list = list;
      // }
      // promise的all方法，可执行所有的promise的方法  两个方法一起调用了
      const [list, total] = await this.$http.all([
        getSpecsList(this.page, this.size),
        
        getSpecsCount(),
      ]);
      // console.log(total);
      // console.log(list)
      this.total = total;
      this.list = list;
   
    },
  },
  created() {
    this.dataInit();
  },
};
</script>

<style>
</style>